<script lang="tsx">
import { defineComponent, unref, type PropType } from 'vue';
import type { DescrProps, DescrSchema } from '../types/descr';
import { isBoolean, isFunction, isUndefined } from 'lodash-es';
import { ElCol } from 'element-plus';
import { getSlot } from '../common/helper';

export default defineComponent({
  name: 'DescrItem',
  props: {
    //当前数参数
    schema: {
      type: Object as PropType<DescrSchema>,
      default: () => ({}),
    },
    // descr 表单相关参数
    descrProps: {
      type: Object as PropType<DescrProps>,
      default: () => ({}),
    },
    descrData: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, { slots }) {
    // 是否显示相关
    function getShow(): { isShow: boolean; isIfShow: boolean } {
      const { show, ifShow } = props.schema;

      let isShow = true;
      let isIfShow = true;

      if (isFunction(show)) {
        isShow = show(unref(props.descrProps));
      } else if (isBoolean(show)) {
        isShow = show;
      }
      if (isFunction(ifShow)) {
        isIfShow = ifShow(unref(props.descrProps));
      } else if (isBoolean(ifShow)) {
        isIfShow = ifShow;
      }
      return { isShow, isIfShow };
    }
    // 渲染field相关
    function renderComponent() {
      const { field, type } = props.schema;
      const { descrData } = props;
      let fileType: string | undefined = '';
      if (type == 'auto') {
        let url = descrData[field as string];
        // 根据文件名称识别文件类型
        const imgExtensions = /\.(jpeg|jpg|gif|png|bmp|webp|svg)$/i;
        if (imgExtensions.test(url)) {
          fileType = 'image';
        } else if (url.indexOf('.pdf') > -1) {
          fileType = 'pdf';
        }
      } else {
        fileType = type;
      }

      let renderd: any;
      if (fileType == 'image') {
        // 图片
        renderd = (
          <el-image
            class="w-100px h-60px"
            src={descrData[field as string]}
            fit="cover"
            zoom-rate={1.2}
            max-scale={7}
            min-scale={0.2}
            preview-src-list={[descrData[field as string]]}
            hide-on-click-modal
          />
        );
      } else if (fileType == 'imageArr') {
        // 图片数组
        renderd = descrData[field as string].map((e: string, i: number) => {
          return (
            <el-image
              class="w-100px h-60px"
              src={e}
              fit="cover"
              zoom-rate={1.2}
              max-scale={7}
              min-scale={0.2}
              preview-src-list={descrData[field as string]}
              initial-index={i}
              hide-on-click-modal
            />
          );
        });
      } else if (fileType == 'pdf') {
        // pdf
        renderd = 'pdf 待处理';
      } else {
        renderd = descrData && field && descrData[field] ? descrData[field] : '--';
      }
      return renderd;
    }

    // descritem 组件相关
    function renderItem() {
      const {
        slot,
        field,
        label,
        render,
        suffix,
        prefix,
        colOrRow,
        slotLabel,
        renderLabel,
        labelClass,
        labelPosition,
        colon,
        fieldClass,
      } = props.schema;
      const {
        labelClass: dlabelClass,
        labelPosition: dlabelPosition,
        colon: dcolon,
      } = props.descrProps;
      const labelPositiond = labelPosition || dlabelPosition;
      const colond = !isUndefined(colon) ? colon : dcolon;
      // 渲染label组件
      let rendLabelSlot = () => {
        let renderd: any;
        if (slotLabel) {
          renderd = getSlot(slots, slot, unref(props.descrProps));
        } else if (renderLabel) {
          renderd = isFunction(renderLabel) ? renderLabel(unref(props.descrProps)) : renderLabel;
        } else {
          const lableClassd = labelClass ? labelClass : dlabelClass;
          renderd = <div class={lableClassd}>{colond ? label + ':' : label}</div>;
        }
        return renderd;
      };
      // 渲染field组件
      const getContent = () => {
        let renderd: any;
        if (slot) {
          renderd = getSlot(slots, slot, unref(props.descrProps));
        } else if (render) {
          renderd = isFunction(render) ? render(unref(props.descrProps)) : render;
        } else {
          renderd = renderComponent();
        }
        return renderd;
      };
      // 组件前后内容
      const showSuffix = !!suffix;
      const getSuffix = isFunction(suffix) ? suffix(unref(props.descrProps)) : suffix;
      const showPrefix = !!prefix;
      const getPrefix = isFunction(prefix) ? prefix(unref(props.descrProps)) : prefix;
      console.log('fieldClass', fieldClass);

      return (
        <div {...{ class: ['flex', labelPositiond == 'top' ? 'flex-col' : 'flex-row'] }}>
          {rendLabelSlot()}

          {field ? (
            <div {...{ class: ['flex', 'flex-1', colOrRow == 'col' ? 'flex-col' : 'flex-row'] }}>
              {showPrefix && <span class="prefix">{getPrefix}</span>}
              <div {...{ class: [fieldClass ? fieldClass : 'flex-1'] }}> {getContent()}</div>
              {showSuffix && <span class="suffix">{getSuffix}</span>}
            </div>
          ) : null}
        </div>
      );
    }

    return () => {
      const { baseColProps = {} } = props.descrProps;
      const { colProps, colSlot, renderColContent } = props.schema;
      const { isIfShow, isShow } = getShow();
      const realColProps = { ...baseColProps, ...colProps };
      //   插槽
      const getContent = () => {
        let render: any;

        if (colSlot) {
          render = getSlot(slots, colSlot, props.descrProps);
        } else if (renderColContent) {
          render = isFunction(renderColContent)
            ? renderColContent(props.descrProps)
            : renderColContent;
        } else {
          render = renderItem();
        }
        return render;
      };
      return (
        isIfShow && (
          <ElCol v-show={isShow} {...realColProps}>
            {getContent()}
          </ElCol>
        )
      );
    };
  },
});
</script>
